<template>
  <div class="w-[100vw]">
    <el-menu class="el-menu-demo" mode="horizontal" :ellipsis="false">
      <el-menu-item>
        <img
          style="width: 100%"
          src="../../../assets/vue.svg"
          alt="Element logo"
        />
        <h1>智慧旅游管理系统</h1>
      </el-menu-item>
      <el-menu-item @click="handleAside()">
        <template #title>
          <el-icon>
            <Open v-if="$store.getters.asideWidth == '250px'" />
            <TurnOff v-else />
          </el-icon>
        </template>
      </el-menu-item>

      <el-menu-item @click="toggle">
        <template #title>
          <el-icon>
            <FullScreen v-if="isFullscreen == false" />
            <Aim v-else />
          </el-icon>
        </template>
      </el-menu-item>
      <el-menu-item>
        <template #title>
          <el-dropdown trigger="click">
            <div class="flex items-center">
              <el-avatar shape="square" :size="40" :src="avatarUrl"></el-avatar>
              <span class="pl-2 text-[16px]"
                >{{ $store.getters.userInfo.username }}
              </span>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item
                  ><el-icon><DocumentChecked /></el-icon
                  >修改密码</el-dropdown-item
                >
                <el-dropdown-item divided @click="handleLogout"
                  ><el-icon><DocumentDelete /></el-icon
                  >退出登录</el-dropdown-item
                >
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useStore } from 'vuex'
import { BaseURL } from '@/constant/index'
import { useFullscreen } from '@vueuse/core'
import { dialog, toast } from '@/utils/Feedback'

const { isFullscreen, enter, exit, toggle } = useFullscreen()
const store = useStore()
// 使用 computed 动态拼接头像路径
const avatarUrl = computed(() => {
  const userInfo = store.getters.userInfo
  return userInfo.image ? `${BaseURL}/${userInfo.image}` : ''
})
// 实现菜单折叠
const handleAside = () => {
  store.commit('user/setAsideWidth')
}
// 退出登录
const handleLogout = () => {
  dialog('是否要退出封路登录？', '提示', 'warning')
    .then(() => {
      store.dispatch('user/logoutAction')
      toast('退出成功', '退出登录成功', 'success')
    })
    .catch(() => {
      toast('取消退出', '', 'info')
    })
}
</script>

<style lang="scss" scoped>
.el-menu-demo {
  height: 65px;
  padding: 0 10px;

  h1 {
    padding: 0 10px;
    font-size: 25px;
  }
}
.el-menu--horizontal > .el-menu-item:nth-child(1) {
  margin-right: auto;
}
.el-menu-item {
  margin-right: 10px;
}
</style>
